<template>
  <div>
    <form action="" @submit="cc">
      <p>书名:<input type="text" v-model="bookname"></p>
      <p>价格:<input type="number" v-model="price"></p>
      <p>
        作者:<select v-model="author">
        <option v-for="i in authorlist" :value="i.id">{{i.authorname}}</option>
      </select>
      </p>
      <p><input type="submit" value="添加"></p>
    </form>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: "Addbooks",
    data: function () {
      return {
        bookname: '',
        price: 0,
        authorlist: [],
        author: 2
      }
    },
    methods: {
      cc() {
        let Formdata = new FormData();
        Formdata.append('bookname', this.bookname);
        Formdata.append('price', this.price);
        Formdata.append('author', this.author);
        axios({
          url: 'http://localhost:8000/myapp/addbooks/',
          method: 'post',
          data: Formdata
        })
      }
    },
    mounted() {
      axios({
        url: 'http://localhost:8000/myapp/author/',
        method: 'get'
      }).then(res => {
        this.authorlist = res.data.data
      })
    }
  }
</script>

<style scoped>

</style>
